page {
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5 !important;
}

/** card */
.box {
  background: #ffffff;
  border-radius: 20rpx;
}

.fw {
  font-weight: bold;
}

.c-6 {
  color: #666666;
}

.c-3 {
  color: #333333;
}

.c-0 {
  color: #000000;
}

.tac {
  text-align: center;
}

.tal {
  text-align: left;
}

.tar {
  text-align: right;
}

.multiline1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 限制显示的行数为2 */
  overflow: hidden;
}

.multiline2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 限制显示的行数为2 */
  overflow: hidden;
}

/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */

.dis_c {
  display: flex;
  align-items: center;
}

.flex {
  display: flex;
}

.fg1 {
  flex-grow: 1;
}

.flex-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flex-r {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.flex-column {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-row-ai {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-sb {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.basis-xs {
  flex-basis: 20%;
}

.basis-sm {
  flex-basis: 40%;
}

.basis-df {
  flex-basis: 50%;
}

.basis-lg {
  flex-basis: 60%;
}

.basis-xl {
  flex-basis: 80%;
}

.flex-sub {
  flex: 1;
}

.flex-twice {
  flex: 2;
}

.flex-treble {
  flex: 3;
}

.flex-direction {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: flex-center;
}

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.align-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}
@for $i from 1 through 100 {
  .wb-#{$i} {
    width: $i * 1%;
  }
}

@for $i from 1 through 1000 {
  .w-#{$i} {
    width: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .lh-#{$i} {
    line-height: $i * 1px;
  }
}
@for $i from 1 through 1000 {
  .h-#{$i} {
    height: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .p-#{$i} {
    padding: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .pl-#{$i} {
    padding-left: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .pt-#{$i} {
    padding-top: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .pr-#{$i} {
    padding-right: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .pb-#{$i} {
    padding-bottom: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .m-#{$i} {
    margin: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .ml-#{$i} {
    margin-left: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .mt-#{$i} {
    margin-top: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .mr-#{$i} {
    margin-right: $i * 1px;
  }
}

@for $i from 1 through 100 {
  .mb-#{$i} {
    margin-bottom: $i * 1px;
  }
}

@for $i from 1 through 50 {
  .fs-#{$i} {
    font-size: $i * 1px;
  }
}

.bg-white {
  background-color: #ffffff !important;
  color: #666666 !important;
}

/** 公共部分 */
.flex-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 可选，添加间距 */
  .flex-4-item {
    width: 23%; /* 每个子项至少占用23%的宽度，剩余空间均分 */
    // background-color: #dddddd;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    padding: 0px 5px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 10rpx;
    border: 1px solid #dddddd;
    &.active {
      border-color: #2db7f5;
    }
  }
}
